<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="bg"></canvas>
  </body>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    html,
    body {
      height: 100%;
      width: 100%;
      overflow: hidden;
    }
  </style>
  <script>
    const cvs = document.getElementById('bg');
    const width = window.innerWidth,
      height = window.innerHeight;
    cvs.width = width;
    cvs.height = height;
    const ctx = cvs.getContext('2d');
    const columnWidth = 20;
    const columnCount = Math.floor(width / columnWidth);
    //记录每一列写到了第几个文字
    const columnNextIndexes = new Array(columnCount);
    columnNextIndexes.fill(1);
    function draw() {
      ctx.fillStyle = 'rgba(240, 240, 240, 0.1)';
      ctx.fillRect(0, 0, width, height);
      const fz = 20;
      ctx.fillStyle = getRandomColor();
      ctx.font = `${fz}px`;
      for (let i = 0; i < columnCount; i++) {
        const x = i * columnWidth;
        const y = fz * columnNextIndexes[i];
        ctx.fillText(getRandomChart(), x, y);
        if (y > height && Math.random() > 0.95) {
          columnNextIndexes[i] = 0;
        } else {
          columnNextIndexes[i]++;
        }
      }
    }
    // draw();
    setInterval(draw, 40);
    function getRandomColor() {
      const fontColors = [
        '#E74C3C',
        '#3498DB',
        '#1ABC9C',
        '#F39C12',
        '#9B59B6',
        '#34495E',
        '#E67E22',
        '#2ECC71',
        '#95A5A6',
        '#D35400',
      ];
      return fontColors[Math.floor(Math.random() * fontColors.length)];
    }
    function getRandomChart() {
      let str = 'abcdefghijklmnopqrstuvwxyz';
      return str[Math.floor(Math.random() * str.length)];
    }
  </script>
</html>
